<template>
  <div class="wrap">
    <div class="title">
      <img src="../../images/main/par.png" alt> 概况
    </div>
    <div class="bodyTitle">
      <div class="list">
        <ul>
          <li>
            <img src="../../images/main/par.png" alt>
            <div class="actionNum">活动次数</div>
            <div class="nums">0</div>
          </li>
          <li>
            <img src="../../images/main/par.png" alt>
            <div class="actionNum">用户数量</div>
            <div class="nums">56234</div>
          </li>
          <li>
            <img src="../../images/main/par.png" alt>
            <div class="actionNum">账户余额</div>
            <div class="nums">￥390000</div>
          </li>
        </ul>
      </div>
    </div>
    <div class="title weap">
      <img src="../../images/main/par.png" alt> 即将开始的活动
    </div>
    <div class="bodyed">
      <div class="bodyedList">
        <div class="leftImg">
          <img src="../../images/main/par.png" alt>
          <ul>
            <li>
              <span>房间类型：</span>
              <span>儿童乐园</span>
            </li>
            <li>
              <span>房间面积：</span>
              <span>约10-12平米</span>
            </li>
            <li>
              <span>云乐汇阳光100（南开店）</span>
            </li>
          </ul>
        </div>
        <div class="rightNew">
          <ul>
            <li>
              <span>美吉姆早教分享会，分享亲子的快乐！</span>
            </li>
            <li class="bor">
              <img src="../../images/main/par.png" alt>
              <span class="times">下午14：00：00</span>
            </li>
            <li class="bor">
              <img src="../../images/main/par.png" alt>
              
              <span class="times">天津市南开区阳光100西园2-2202</span>
            </li>
            <li class="bor">
              <span>当前已报名：6人，还差2人参团</span>
            </li>
            <li>
              <span>如活动前24小时未达到最低成团人数则活动作废。</span>
            </li>
            <li>
              <div class="btn">
                <span>邀请报名</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {};
  }
};
</script>
<style scoped>
.wrap {
  padding: 68px 136px;
  width: 100%;
}
.title {
  height: 33px;
  line-height: 33px;
  font-size: 24px;
  font-family: PingFangSC-Medium;
  font-weight: bold;
}
.title img {
  width: 28px;
  height: 26px;
  float: left;
  padding-top: 5px;
  margin-right: 10px;
}
.list {
  width: 1200px;
  height: 140px;
  margin-top: 27px;
  margin-left: 37px;
}
.list ul {
  width: 1200px;
  height: 112px;
}
.list ul li {
  float: left;
  background: #f6f6f6;
  border: 1px solid #ffffff;
  width: 398px;
  height: 138px;
  text-align: center;
  position: relative;
}
.list ul li img {
  width: 25px;
  height: 25px;
  position: absolute;
  top: 27px;
  left: 131px;
}
.actionNum {
  font-family: PingFangSC-Medium;
  font-size: 18px;
  color: #000000;
  letter-spacing: 0.02px;
  padding-top: 28px;
  display: inline-block;
  font-weight: bold;
  width: 73px;
}
.nums {
  font-family: PingFangSC-Medium;
  font-size: 36px;
  color: #4B74FF;
  letter-spacing: 0.03px;
  width: 400px;
  margin-top: 29px;
}
.weap {
  margin-top: 70px;
}
.bodyed {
  height: 500px;
  width: 1340px;
  border-bottom: 1px solid #e6e6e6;
  margin-left: 30px;
}
.bodyedList {
  height: 500px;
  width: 1340px;
  margin-left: 198px;
}
.leftImg,
.rightNew {
  height: 422px;
  margin-top: 30px;
}
.leftImg {
  float: left;
  background: #ffffff;
  border: 1px solid #efefef;
  box-shadow: 0 2px 6px 0 #efefef;
  width: 406px;
  height: 420px;
}
.leftImg img {
  width: 408px;
  height: 257px;
}
.leftImg ul li {
  font-weight: bold;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #efefef;
  font-family: PingFangSC-Regular;
  font-size: 18px;
  color: #000000;
  letter-spacing: 0.03px;
  text-align: center;
}
.leftImg ul li:nth-child(3) {
  border: 0px;
}
.rightNew {
  margin-left: 202px;
  float: left;
  width: 606px;
  height: 420px;
}
.rightNew ul li:nth-child(1),
li:nth-child(5) {
  font-family: PingFangSC-Medium;
  font-weight: bold;
  font-size: 20px;
  color: #000000;
  letter-spacing: 0.02px;
  text-align: left;
  margin-top: 22px;
}
.rightNew ul li:nth-child(2) {
  margin-top: 40px;
}
.rightNew ul .bor {
  font-family: PingFangSC-Medium;
  font-size: 18px;
  color: #888888;
  letter-spacing: 0.02px;
  text-align: left;
  line-height: 30px;
}
.btn {
  background: #4B74FF;
  width: 161px;
  height: 40px;
}
.bor {
  position: relative;
}
.times {
  margin-left: 26px;
}
.bor img {
    position: absolute;
    top: 6px;
    width: 18px;
    height: 18px;
    left: 4px;
}
.btn span {
  font-family: PingFangSC-Medium;
  font-size: 18px;
  color: #ffffff;
  letter-spacing: 0.02px;
}
.btn {
  margin-top: 40px;
  text-align: center;
  line-height: 40px;
}
</style>
